<template>
    <view class="main">
        <view class="box">
            <view class="title">请输入本次您的提现金额 </view>
            <view class="form" :style="{ height: newsPanelHeight + 'px' }">
                <view class="f-title">可提现金额(元)：{{ userInfo.balance || 0 }}</view>
                <view class="ipt-box dispaly-center">
                    <view class="d">¥</view>
                    <view class="ipt">
                        <input type="text" placeholder="0.00" v-model="formData.money">
                    </view>
                </view>
                <view class="btn-box dispaly-align-center">
                    <view class="btn dispaly-align-center" @click="postWithdrawal">提交</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onReady, onShow } from '@dcloudio/uni-app'
import { getScreenSHeight } from '@/utils/util'
import { getUserInfo, withdrawal } from '@/api/apiList';

// 提现
let formData = reactive({
    money: ''
})
const postWithdrawal = async () => {
    if (formData.money > userInfo.value.balance) {
        uni.showToast({
            title: '可提现金额不足',
            icon: 'none'
        })
        return
    }
    const res = await withdrawal(formData)
    if (res.code == 200) {
        uni.showToast({
            title: '提现申请成功，等待管理人员审核',
            icon: 'none'
        })
        setTimeout(() => {
            uni.navigateBack()
        }, 1500)
    }
}


const userInfo = ref({})
const getUser = async () => {
    const res = await getUserInfo()
    if (res.code == 200) {
        userInfo.value = res.data
        uni.setStorageSync('user', userInfo.value)
    }
}
onShow(() => {
    getUser()
})

// 获取屏幕剩余高度
const newsPanelHeight = ref(0)
onReady(async () => {
    newsPanelHeight.value = await getScreenSHeight(90)
})
</script>
<style lang="scss" scoped>
.main {
    .box {
        .title {
            height: 80rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 30rpx;
            color: #000000;
            padding: 40rpx 66rpx;
        }

        .form {
            background: #FFFFFF;
            border-radius: 24rpx 24rpx 0rpx 0rpx;
            padding: 65rpx;
            box-sizing: border-box;

            .f-title {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #999999;
                margin-bottom: 60rpx;
            }

            .btn-box {
                width: 100%;
                margin-top: 120rpx;

                .btn {
                    width: 654rpx;
                    height: 88rpx;
                    background: #FB4E47;
                    border-radius: 44rpx;
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 34rpx;
                    color: #FFFFFF;
                }
            }

            .ipt-box {
                padding-bottom: 55rpx;
                border-bottom: 1rpx solid #eee;

                .d {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 800;
                    font-size: 70rpx;
                    color: #000000;
                    margin-right: 20rpx;
                }

                .ipt {
                    input {
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: 800;
                        font-size: 70rpx;
                        color: #CCCCCC;
                        height: 100%;
                    }
                }
            }
        }
    }
}
</style>